<div class="chip-group-container">
  <div class="chip-outline-field">
    <label class="chip-outline-label">{{ label }}</label>
    <div class="chip-scroll-row plain-chip-row">
      <mat-chip *ngFor="let chip of chips" [removable]="removable" (removed)="remove(chip)" (click)="onChipClick(chip); $event.stopPropagation()" [matTooltip]="'Click to select or remove'">
        {{chip.name}}
        <button matChipRemove *ngIf="removable">
          <mat-icon>cancel</mat-icon>
        </button>
      </mat-chip>
      <input
        #chipInput
        [formControl]="chipCtrl"
        (keydown.enter)="add({ input: chipInput, value: chipInput.value })"
        (keydown.comma)="add({ input: chipInput, value: chipInput.value })"
        [matAutocomplete]="auto"
        (click)="$event.stopPropagation()"
        [placeholder]="placeholder"
        class="chip-input"
        style="outline: none; border: none; background: transparent;"
      >
    </div>
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
      <mat-option *ngFor="let chip of allChips" [value]="chip">
        {{chip.name}}
      </mat-option>
    </mat-autocomplete>
  </div>
</div>
